<template>
  <div class="app-container">
    <div class="searchform">
      <el-form
        ref="search"
        :model="search"
        size="mini"
        label-width="90px"
      >
        <el-row :gutter="6">

          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="customer_name" label="客户名称">
              <el-input
                v-model="search.customer_name"
                placeholder="客户名称"
                clearable
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="phone" label="电话">
              <el-input
                v-model="search.phone"
                placeholder="电话"
                clearable
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="is_try" label="是否试驾">
              <r-select v-model="search.is_try" type="1004"/>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="is_order" label="是否下单">
              <r-select v-model="search.is_order" type="1004"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="is_issue" label="是否已下发">
              <r-select v-model="search.is_issue" type="1004"/>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item prop="retain_cust_type" label="留资类型">
              <r-select v-model="search.retain_cust_type" type="2301"/>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item label="创建日期" prop="created_at" type="date">
              <el-date-picker
                v-model="search.created_at"
                :unlink-panels="true"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="8" :md="6">
            <el-form-item label="最新浏览时间" prop="last_browse_date" type="date">
              <el-date-picker
                v-model="search.last_browse_date"
                :unlink-panels="true"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>
          <div style="text-align:right">
            <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询</el-button>
            <el-button icon="el-icon-refresh" @click="resetForm('search')">重置</el-button>
          </div>
        </el-row>
      </el-form>
    </div>

    <div class="table">
      <div class="tableHead">
        <div class="tabletitle">列表</div>
        <div class="btnGroup">
          <el-button-group>
            <el-button v-if="userInfo.whiteFlag === 10041001" :loading="exportLoading" type="primary" icon="el-icon-download" @click="recordExportData">导出</el-button>
            <el-button type="primary" icon="el-icon-s-comment" @click="showSmsDialog" >发送短信</el-button>
          </el-button-group>
        </div>
      </div>
      <baseTable ref="table" @chaneg-size="changeSizeHandle" @chaneg-page="changePageHandle" @selection-change="handleSelectionChange">
        <el-table-column type="index" label="序号" min-width="50"/>
        <el-table-column type="selection" width="50"/>
        <el-table-column align="center" label="操作" min-width="180">
          <template slot-scope="scope">
            <el-tooltip class="item" content="明细" placement="bottom">
              <el-button
                type="text"
                style="font-size: 20px;"
                icon="el-icon-document"
                @click="detail(scope.row)"
              />
            </el-tooltip>
            <el-tooltip class="item" content="下发" placement="bottom">
              <el-button
                type="text"
                style="font-size: 20px;"
                icon="el-icon-position"
                @click="issueClick(scope.row)"
              />
            </el-tooltip>
            <el-tooltip class="item" content="编辑" placement="bottom">
              <el-button type="text" style="font-size: 20px;" icon="el-icon-edit-outline" @click="editOpen(scope.row)"/>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="customer_name" label="客户名称" min-width="150"/>
        <el-table-column v-if="userInfo.whiteFlag === 10041001" prop="phone" label="电话" min-width="150"/>

        <el-table-column prop="is_issue" label="是否已下发" min-width="100">
          <template slot-scope="scope">
            <filtercode v-model="scope.row.is_issue" type="1004"/>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="dealer_name" label="下发经销商" min-width="150"/>
        <el-table-column :formatter="dateFormat" :sort-method="sortIssueTime" prop="issue_at" label="下发时间" min-width="150" sortable/>
        <el-table-column prop="is_try" label="是否试驾" min-width="100">
          <template slot-scope="scope">
            <filtercode v-model="scope.row.is_try" type="1004"/>
          </template>
        </el-table-column>
        <el-table-column prop="is_order" label="是否下单" min-width="100">
          <template slot-scope="scope">
            <filtercode v-model="scope.row.is_order" type="1004"/>
          </template>
        </el-table-column>
        <el-table-column :formatter="dateFormat" prop="created_at" label="注册时间" min-width="150" sortable/>
        <el-table-column prop="retain_cust_type" label="留资类型" min-width="100">
          <template slot-scope="scope">
            <filtercode v-model="scope.row.retain_cust_type" type="2301"/>
          </template>
        </el-table-column>
        <el-table-column :formatter="dateFormat" :sort-method="sortBrowseTime" prop="last_browse_date" label="最新浏览时间" min-width="150" sortable/>
        <el-table-column prop="last_browse_position" label="最新浏览定位" min-width="200"/>

        <!-- <el-table-column prop="last_browse_date" label="最新浏览时间" min-width="150">
          <template slot-scope="scope">
            <span>{{ dateFormat(scope.row.last_browse_date) }}</span>
          </template>
        </el-table-column> -->
        <el-table-column prop="browse_num" label="浏览次数" min-width="150"/>
        <el-table-column prop="share_num" label="分享次数" min-width="150"/>

        <el-table-column :formatter="formatDate" prop="last_try_drive_date" label="最新试驾时间" min-width="150"/>
        <el-table-column prop="last_try_series_name" label="最新试驾车系" min-width="150"/>

      </BaseTable>
    </div>

    <div v-if="showDetail">
      <detail
        :entity="rowData"
        :show-detail.sync="showDetail"
      />
    </div>

    <!-- <afterDealer :dialog-form-visible.sync="dialogFormVisible4dealer" @getAfterDealerInfo="getAfterDealerInfo"/> -->
    <custBizDialog v-if="dialogFormVisible4dealer" :close-value="rowData" :dialog-form-visible.sync="dialogFormVisible4dealer" @aftConfirm="aftConfirm"/>

    <editDialog :edit-dialog.sync="editDialog" :user="userInfo1" @editClose="editClose"/>
    <SmsDialog :edit-dialog.sync="smsDialog" :multiple-selection="multipleSelection" @smsClose="smsClose"/>
  </div>
</template>
<script>
import rSelect from '@/components/Select/Select'
import BaseTable from '@/components/BaseTable'
import filtercode from '@/components/Checkbox/filtercode'
import { queryPageInfos4custBiz, issued4custBiz, queryInfos4custBiz } from '@/api/vehicle/custBiz.js'
import formMixins from '@/mixins/formMixins'
import { mapGetters } from 'vuex'
import { exportFile } from '@/utils'
import detail from './detail'
import editDialog from './editDialog'
import afterDealer from '@/components/basedata/afterDealer.vue'
import custBizDialog from './custBizDialog.vue'
import SmsDialog from './smsBizDialog.vue'

import moment from 'moment'
// import _ from 'lodash'

export default {
  name: 'CustBizIndex',
  components: {
    BaseTable,
    rSelect,
    filtercode,
    detail,
    afterDealer,
    moment,
    custBizDialog,
    editDialog,
    SmsDialog
  },

  mixins: [formMixins],
  data() {
    return {
      dialogFormVisible4dealer: false,
      exportLoading: false,
      showDetail: false,
      editDialog: false,
      rowData: {},
      search: {
        dealer_code: '',
        customer_name: '',
        phone: '',
        is_issue: '',
        is_try: '',
        is_order: '',
        retain_cust_type: '',
        created_at: [],
        last_browse_date: [],
        limit: 10,
        pageNum: 1
      },
      selectDealerInfo: {},
      tableList: [],
      userInfo1: {
        userName: '',
        userId: ''
      },
      multipleSelection: [],
      smsDialog: false
    }
  },

  computed: {
    ...mapGetters(['dictMap', 'userInfo'])
  },
  mounted() {
    this.searchHandle()
  },
  methods: {
    sortIssueTime(a, b) {
      let num1 = 0
      let num2 = 0
      if (a.issue_at) {
        num1 = Date.parse(a.issue_at).valueOf()
      }
      if (b.issue_at) {
        num2 = Date.parse(b.issue_at).valueOf()
      }
      return num1 - num2
    },
    sortBrowseTime(a, b) {
      let num1 = 0
      let num2 = 0
      if (a.last_browse_date) {
        num1 = Date.parse(a.last_browse_date).valueOf()
      }
      if (b.last_browse_date) {
        num2 = Date.parse(b.last_browse_date).valueOf()
      }
      return num1 - num2
    },
    issueClick(rowData) {
      this.dialogFormVisible4dealer = true
      this.rowData = rowData
      console.log(this.rowData)
    },
    aftConfirm(selects) {
      console.log(selects)
      this.selectDealerInfo = selects
      if (!selects) {
        this.$message({
          type: 'warning',
          message: '请选择经销商!'
        })
        return false
      }

      const args = Object.assign({}, this.rowData)
      args.dealer_code = selects.dealer_code
      this.issuedOper(args)
      // this.search.DEALER_ID = selects.DEALER_ID
      // this.search.DEALER_NAME = selects.DEALER_NAME
    },
    // dateFormat: function(row, column) {
    //   var date = row[column.property]
    //   // debugger
    //   if (date) {
    //     return moment(date).format('YYYY-MM-DD HH:mm')
    //   } else {
    //     return ''
    //   }
    // },
    detail(row) {
      console.log(row)

      const args = Object.assign({}, row)
      //     return moment(date).format('YYYY-MM-DD HH:mm')
      if (args.last_try_drive_date) { args.last_try_drive_date = moment(args.last_try_drive_date).format('YYYY-MM-DD') }
      if (args.last_browse_date)args.last_browse_date = moment(args.last_browse_date).format('YYYY-MM-DD HH:mm')
      if (args.created_at) args.created_at = moment(args.created_at).format('YYYY-MM-DD HH:mm')
      if (args.issue_at) args.issue_at = moment(args.issue_at).format('YYYY-MM-DD HH:mm')

      this.rowData = args
      this.showDetail = true
    },
    colseDetail() {
      this.showDetail = false
    },
    searchHandle() {
      this.dialogVisible = false
      const table = this.$refs['table']
      // const search = _.extend(this.search)
      const args = Object.assign({}, this.search)

      if (args.created_at && args.created_at.length > 0) {
        args.created_at_start = args.created_at[0]
        args.created_at_end = args.created_at[1]
      } else {
        args.created_at_start = ''
        args.created_at_end = ''
      }

      if (args.last_browse_date && args.last_browse_date.length > 0) {
        args.last_browse_date_start = args.last_browse_date[0]
        args.last_browse_date_end = args.last_browse_date[1]
      } else {
        args.last_browse_date_start = ''
        args.last_browse_date_end = ''
      }

      queryPageInfos4custBiz(args)
        .then(res => {
          table.complete().filData(res)
        })
        .catch(err => {
          table.complete()
        })
    },

    issuedOper(args) {
      console.log(args)
      const that = this

      const confirmText = '确认下发【' + args.customer_name + '】？'

      this.$confirm(confirmText, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        issued4custBiz({ user_id: args.user_id, dealer_code: args.dealer_code }).then(res => {
          that.$message.success('操作成功！')
          that.searchHandle()
        })
      }).catch(() => {

      })
    },

    editOpen(data) {
      this.editDialog = true
      this.userInfo1 = {
        userName: data.customer_name,
        userId: data.user_id
      }
    },

    editClose() {
      this.userInfo1 = {
        userName: '',
        userId: ''
      }
      this.editDialog = false
      this.searchHandle()
    },
    // 导出
    recordExportData() {
      if (this.search.created_at != null && this.search.created_at.length > 0) {
        this.search.created_at_start = this.search.created_at[0]
        this.search.created_at_end = this.search.created_at[1]
      } else {
        this.search.created_at_start = ''
        this.search.created_at_end = ''
      }
      if (this.search.last_browse_date && this.search.last_browse_date.length > 0) {
        this.search.last_browse_date_start = this.search.last_browse_date[0]
        this.search.last_browse_date_end = this.search.last_browse_date[1]
      } else {
        this.search.last_browse_date_start = ''
        this.search.last_browse_date_end = ''
      }
      this.exportLoading = true
      queryInfos4custBiz(this.search)
        .then(res => {
          const option = {
            tHeader: ['客户名称', '电话', '是否已下发', '下发经销商', '下发时间', '是否试驾', '是否下单', '注册时间', '留资类型', '最新浏览时间', '最新浏览定位', '浏览次数', '分享次数', '最新试驾时间', '最新试驾车系'],
            filterVal: ['customer_name', 'phone', 'is_issue', 'dealer_name', 'issue_at', 'is_try', 'is_order', 'created_at', 'retain_cust_type', 'last_browse_date', 'last_browse_position', 'browse_num', 'share_num', 'last_try_drive_date', 'last_try_series_name'],
            table: res,
            fileName: '客户管理查询导出'
          }
          exportFile(option, () => {
            this.exportLoading = false
          })
        })
        .catch(err => {})
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    smsClose() {
      this.smsDialog = false
      this.searchHandle()
    },
    showSmsDialog() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          type: 'warning',
          message: '请选择表格数据'
        })
      } else {
        this.smsDialog = true
      }
    }
  }
}
</script>

<style scoped>

.content a {
    color: #409eff;
}
</style>
